<template>
	<el-col :span="24" id="MEcontent1_container">

		<el-col :span="7" id="MEcontent_block">
			<!-- <el-tooltip class="item" effect="dark" content="查看所有区块"> -->
				<!-- <router-link to="/blocks" id="blocks"></router-link> -->
				<!-- <el-col :span="12" :offset="5" id="blocks"></el-col> -->
				<el-col :span="12" class="MEtest">
					<div id="MEblocks" @click="route2blocks"></div>
				</el-col>
			<!-- </el-tooltip> -->
			<!-- <el-tooltip class="item" effect="dark" content="区块总数" placement="bottom-start"> -->
				<el-col :span="12" class="MEtest">
					<router-link to="/MEblocks" id="MEblockst">区块</router-link>
				</el-col>

				<el-col :span="24" class="MEtest">
					<transition name="el-fade-in" v-on:after-leave="afterleave">
						<router-link to="/MEblocks" id="MEblocksnum" v-show="blockshow">{{blocks_num}}</router-link>
					</transition>
				</el-col>
			<!-- </el-tooltip> -->
		</el-col>

		<el-col :span="7" id="MEcontent_transaction">
			<el-col :span="12" class="MEtest">
				<div id="MEtransactions" @click="route2txs"></div>
			</el-col>
			<!-- <el-tooltip class="item" effect="dark" content="交易总数" placement="bottom-end"> -->

			<el-col :span="12" class="MEtest">
				<router-link to="/MEtransactions" id="MEtransactionst">交易</router-link>
			</el-col>

			<el-col :span="24" class="MEtest">
				<transition name="el-fade-in" v-on:after-leave="afterleave">
					<router-link to="/MEtransactions" id="MEtransactionsnum" v-show="txsshow">{{txs}}</router-link>
				</transition>
			</el-col>
				
			<!-- </el-tooltip> -->
		</el-col>

		<el-col :span="7" id="MEtxspeed">
			<el-col :span="24" class="MEtest">
				<div id="MEtpst">当前TPS/最大TPS</div>
			</el-col>

			<el-col :span="24" class="MEtest">
				<transition name="el-fade-in" v-on:after-leave="afterleave">
					<div id="MEtps" v-show="tpsshow">{{ctps}}/{{mtps}}</div>
				</transition>
			</el-col>
		</el-col>

	</el-col>
</template>

<script>

	import herderjs from "../utils/header.js"

	export default {

		//当前组件定义的变量
		data () {
			return {
				blocks_num: "",
				txs: "",
				ctps: "",
				mtps: "",
				blockshow: true,
				txsshow: true,
				tpsshow:true,
				flag1: false,
				flag2: false,
				refresh_flag: true
			}
		},

		//当前组件创建时调用
		created () {
			this.getData()
		},

		//组件挂载时调用
		mounted(){
			//监听herderjs中的数据，实时接收herder.vue中传过来的值
			herderjs.$on('refresh_flag', (data) => { 
				this.refresh_flag = data
			})
			herderjs.$on('val', (data) => {
				// console.log(this.flag1===true)
				if (data===0 && this.refresh_flag) {
					// console.log("hhhhhh")
					let _this = this
					setTimeout(function () {
						// this.val = data
						// console.log("11111")
						_this.getData(data)
					}, 10000)
				}
		    })
		},

		//当前组件中定义的方法
		methods: {

			//getData函数用于通过接口获取后端数据
			getData (val) {
				//使用post方式调用接口,totalBlocksTxs为查询所有交易的接口
				this.$api.post('blockchain/totalBlocksTxs', null, r => {
					if(r.success === true)
					{
						if (this.blocks_num != r.data.blocks) {
							this.blockshow = false
							this.blocks_num = r.data.blocks
						}
						if (this.txs != r.data.txs) {
							this.txsshow = false
							this.txs = r.data.txs
						}
						this.flag1 = true
						if (this.flag1===true && this.flag2=== true) {
							herderjs.$emit('val',val + 1)
							this.flag1 = false
							this.flag2 = false
						}
					} else {
						this.blocks_num = "null";
						this.txs = "null";
					}
				})

				this.$api.post('blockchain/tps', null, r => {
					if(r.success === true) {
						if (this.ctps != r.data.current || this.mtps != r.data.max) {
							this.tpsshow = false
							this.ctps = r.data.current
							this.mtps = r.data.max
						}
						this.flag2 = true
						if (this.flag1===true && this.flag2=== true) {
							herderjs.$emit('val',val + 1)
							this.flag1 = false
							this.flag2 = false
						}
					}
				})
			},

			route2blocks (){
				this.$router.push(`/blocks`)
			},

			route2txs (){
				this.$router.push(`/transactions`)
			},

			afterleave: function() {
				this.blockshow = true
				this.txsshow = true
				this.tpsshow = true
			}

		}
	}
</script>

<style scoped>

	.MEtest {
		height: 50%;
	}

	#MEcontent1_container {
		height: 1.72rem;
		/*height: 11.6%;*/
		/*width: 7.5rem;*/
	}

	#MEcontent_block {
		/*height: 1.32rem;*/
		height: 89%;
		width: 31%;
		background-image:url('../assets/MEblocks_bac.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		margin-top: 1.2%;
		margin-left: 2.2%;
		margin-right: 1.1%;
	}

	#MEcontent_transaction {
		height: 89%;
		width: 31%;
		background-image:url('../assets/MEtx_bac.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		margin-top: 1.2%;
		margin-right: 1.1%;
	}

	#MEtxspeed {
		height: 89%;
		width: 31%;
		background-image:url('../assets/MEblockchainconcept.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		margin-top: 1.2%;
	}

	#MEblocks {
		float: right;
		width: 0.56rem;
		height: 0.56rem;
		margin-top: 0.2rem;
		margin-right: 0.07rem;
		background-image:url('../assets/MEicon_block_big.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	#MEblocksnum {
		/*float: right;*/
		text-align: center;
		display: block;
		position: relative;
		width: 100%;
		color: rgb(248, 248, 248);
		font-size: 0.32rem;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		text-decoration:none;
		word-break: break-all;
		word-wrap: break-word;
	}

	#MEblockst{
		float: left;
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 0.28rem;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		/*cursor: pointer;*/
		text-decoration:none;
		position: relative;
		word-break: break-all;
		word-wrap: break-word;
		margin-top: 0.29rem;
		/*margin-right: 21%;*/
	}

	#MEtransactions {
		float: right;
		width: 0.56rem;
		height: 0.56rem;
		margin-top: 0.2rem;
		margin-right: 0.05rem;
		background-image:url('../assets/MEicon_block_big.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	#MEtransactionsnum {
		text-align: center;
		display: block;
		position: relative;
		width: 100%;
		color: rgb(248, 248, 248);
		font-size: 0.32rem;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		text-decoration:none;
		word-break: break-all;
		word-wrap: break-word;
	}

	#MEtransactionst {
		float: left;
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 0.28rem;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		/*cursor: pointer;*/
		text-decoration:none;
		position: relative;
		word-break: break-all;
		word-wrap: break-word;
		margin-top: 0.29rem;
	}

	#MEtpst {
		/*float: left;*/
		/*display:block;*/
		color: rgb(248, 248, 248);
		font-size: 0.24rem;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		/*cursor: pointer;*/
		text-decoration:none;
		/*position: relative;*/
		word-break: break-all;
		word-wrap: break-word;
		text-align: center;
		margin-top: 0.32rem;
	}

	#MEtps {
		text-align: center;
		display: block;
		position: relative;
		width: 100%;
		color: rgb(248, 248, 248);
		font-size: 0.32rem;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		text-decoration:none;
		word-break: break-all;
		word-wrap: break-word;
	}

</style>